<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>City lookup</title>

    <!-- This example is not tested -->

    <style type="text/css">
        div.elem {
            margin: 20px;
        }

        div#cities{
            display: none;
        }
    </style>

    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        var xmlHttpObj;

        function catchEvent(eventObj, event, eventHandler) {
            if (eventObj.addEventListener) {
                eventObj.addEventListener(event, eventHandler, false);
            }
            else if (event.attachEvent) {
                event = "on" + event;
                eventObj.attachEvent(event, eventHandler);
            }
        }

        catchEvent(window, "load", function() {
            document.getElementById("cities").style.display = "block";
            document.getElementById("submitButton").style.display = "none";
            document.getElementById("stateList").onchange = popularteList;
        });

        // create XHR object
        function getXmlHttp() {
            var xmlhttp = null;
            if(window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                try {
                    xmlhttp = new ActiveXObject("Msxmsl2.XMLHTTP");
                }
                catch (e) {
                    try {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e) {
                        return null;
                    }
                }
            }

            return xmlhttp;
        }

        // send XHR request
        function popularteList() {
            var state = document.getElementById("stateList").value;
            var url = 'example15.4.php?state=' + state;
            
            if(!xmlHttpObj) {
                xmlHttpObj = getXmlHttp();
            }
            if(!xmlHttpObj) { return; }

            xmlHttpObj.open('GET', url, true);
            xmlHttpObj.onreadystatechange = getCities;
            xmlHttpObj.send(null);
        }

        function getCities() {
            if(xmlHttpObj.readystate == 4 && xmlHttpObj.status == 200) {
                try {

                    var response = JSON.parse(xmlHttpObj.responseText);
                    
                    var citySelection = document.getElementById("citySelection");
                    var name = value = null;

                    for(var i=0; i<response.length; i++) {
                        name = response[i].title;
                        value = response[i].value;
                        citySelection.options[i] = new Option(name, value);
                    }
                }
                catch(e) {
                    alert(e.message);
                }
                
            }
            else if(xmlHttpObj.readyState == 4 && xmlHttpObj.status != 200) {
                document.getElementById('cities').innerHTML = "Error: No Cities!";
            }
        }
    //]]>
    </script>
    
</head>
<body>
    <h3>Select State:</h3>

    <form action="example14.2_selectCity.php" method="get">
        <div class="elem">
            <select name="state" id="stateList">
                <option value="CA">California</option>
                <option value="MO">Missouri</option>
                <option value="WA">Washington</option>
                <option value="ID">Idaho</option>
            </select>
        </div>

        <h3> Cities: </h3>
        <div class="elem" id="cities">
            <select id="citySelection">
                <option> </option>
            </select>
        </div>
        <p>
            <input type="submit" value="Lookup" id="submitButton" />
        </p>
    </form>
</body>
</html>
